<template>
  <div class="emp-container">
    <div class="emp-search">
      <span class="page-title">员工基本信息登记列表</span>

      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="员工姓名" value="1"></el-option>
          <el-option label="驻厂" value="2"></el-option>
          <el-option label="企业名称" value="3"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchEmpBasic">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>
    </div>

    <!--员工基本信息登记列表-->
    <div class="emp-table">
      <el-table ref="multipleTable" v-loading="listLoading" :data="empBasicData" border stripe fit
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}"
                :default-sort="{prop: 'time', order: 'descending'}"
                @filter-change="filterChange" @sort-change='sortChange'
      >
        <el-table-column type="selection" :reserve-selection="true" width="40" v-if="checkBoxIcon"></el-table-column>
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="员工姓名" width="100" :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="驻厂" width="100" :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            {{ scope.row.teacherName }}
          </template>
        </el-table-column>
        <el-table-column label="用户来源" width="120"
                         :filters="[{ text: '线上入职', value: 1 }, { text: '线下入职', value: 2 }]"
                         :filter-multiple="false" column-key="type"
                         filter-placement="bottom-end" prop="type">
          <template slot-scope="scope">
            {{ scope.row.type | changeOriginType}}
          </template>
        </el-table-column>
        <el-table-column label="企业名称" width="280" :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            {{ scope.row.mechanismName }}
          </template>
        </el-table-column>
        <el-table-column label="入职时间" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.workBeginTime">{{ scope.row.workBeginTime | formatTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="离职时间" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.workEndTime">{{ scope.row.workEndTime | formatTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="生成时间" width="160" sortable prop="time">
          <template slot-scope="scope">
            <span v-if="scope.row.time">{{ scope.row.time | formatTime2}}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="150">
          <template slot-scope="{row}">
            <el-dropdown size="mini" :split-button="true" type="primary" @click="handleLook(row)"
                         v-if="checkPermissionPoints(3) == 1">查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEdit(row)" v-if="checkPermissionPoints(4) == 1">编辑
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleDelete(row)" v-if="checkPermissionPoints(2) == 1">删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getEmpBasicList"/>
    </div>

    <!--查看-->
    <el-dialog title="详细信息" :visible.sync="dialogLookVisible" width="960px" class="emp-dialog look-dialog" top="11vh">
      <el-form label-width="120px" size="mini">
        <el-form-item label="员工姓名：">
          <span>{{empBasic.userName}}</span>
        </el-form-item>
        <el-form-item label="性别：">
          <span>{{empBasic.userSex == 1?'男':'女'}}</span>
        </el-form-item>
        <el-form-item label="身份证号码：">
          <span>{{empBasic.userCardNumber}}</span>
        </el-form-item>
        <el-form-item label="入职日期：">
          <span v-if="empBasic.workBeginTime">{{empBasic.workBeginTime | formatTime}}</span>
        </el-form-item>
        <el-form-item label="离职日期：">
          <span v-if="empBasic.workEndTime">{{empBasic.workEndTime | formatTime}}</span>
        </el-form-item>
        <el-form-item label="家庭地址：">
          <span>{{empBasic.userAddress}}</span>
        </el-form-item>
        <el-form-item label="联系电话：">
          <span>{{empBasic.userPhone}}</span>
        </el-form-item>
        <el-form-item label="工号：">
          <span>{{empBasic.workNum}}</span>
        </el-form-item>
        <el-form-item label="入职部门：">
          <span>{{empBasic.workDepartment}}</span>
        </el-form-item>
        <el-form-item label="组长姓名：">
          <span>{{empBasic.bossName}}</span>
        </el-form-item>
        <el-form-item label="组长联系方式：">
          <span>{{empBasic.bossPhone}}</span>
        </el-form-item>
        <el-form-item label="宿舍楼号：">
          <span>{{empBasic.userHostel}}</span>
        </el-form-item>
        <el-form-item label="员工来源：">
          <span>{{empBasic.userComeFrom}}</span>
        </el-form-item>
        <el-form-item label="供应商电话：">
          <span>{{empBasic.comeFormTel}}</span>
        </el-form-item>
        <el-form-item label="员工工价：">
          <span>{{empBasic.workMoney}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" style="width: 96px" @click="dialogLookVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="编辑" :lock-scroll="true" :visible.sync="dialogEditVisible" width="960px" top="11vh"
               class="emp-dialog edit-dialog" @close="cancelEmpBasic">
      <el-form ref="ruleForm" :model="ruleForm" label-width="auto" size="mini">
        <el-form-item label="员工姓名：" style="margin-bottom: 0">
          <span>{{ruleForm.userName}}</span>
        </el-form-item>
        <el-form-item label="性别：" style="margin-bottom: 0">
          <span>{{ruleForm.userSex == 1?'男':'女'}}</span>
        </el-form-item>
        <el-form-item label="身份证号码：" style="margin-bottom: 0">
          <span>{{ruleForm.userCardNumber}}</span>
        </el-form-item>
        <el-form-item label="入职日期：" style="margin-bottom: 0">
          <span>{{ruleForm.workBeginTime | formatTime}}</span>
        </el-form-item>
        <el-form-item label="离职日期：" style="margin-bottom: 0">
          <span>{{ruleForm.workEndTime | formatTime}}</span>
        </el-form-item>
        <el-form-item label="家庭住址：">
          <el-input v-model="ruleForm.userAddress" style="width: 640px;" placeholder="请输入家庭住址"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input v-model="ruleForm.userPhone" style="width: 640px;" placeholder="请输入联系电话"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="工号：">
          <el-input v-model="ruleForm.workNum" style="width: 640px;" placeholder="请输入工号" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="入职部门：">
          <el-input v-model="ruleForm.workDepartment" style="width: 640px;" placeholder="请输入入职部门"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="组长姓名：">
          <el-input v-model="ruleForm.bossName" style="width: 640px;" placeholder="请输入组长姓名"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="组长联系方式：">
          <el-input v-model="ruleForm.bossPhone" style="width: 640px;" placeholder="请输入组长联系方式"
                    :clearable="true"></el-input>
        </el-form-item>

        <el-form-item label="宿舍楼号：">
          <el-input v-model="ruleForm.userHostel" style="width: 640px;" placeholder="请输入宿舍楼号"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="员工来源：">
          <el-input v-model="ruleForm.userComeFrom" style="width: 640px;" placeholder="请输入员工来源"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="供应商电话：">
          <el-input v-model="ruleForm.comeFormTel" style="width: 640px;" placeholder="请输入供应商电话"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="员工工价：">
          <el-input v-model="ruleForm.workMoney" style="width: 640px;" placeholder="请输入员工工价"
                    :clearable="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="success" style="width: 96px" @click="saveEmpBasic" :loading="sendLoad">保存
        </el-button>
        <el-button size="small" style="width: 96px" @click="cancelEmpBasic">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex';
  import {permissionPoints} from '@/utils/permission';
  import {formatDate} from "@/utils/index";
  import {deleteEmpBasicInfo, getEmpBasicInfo, getInitEmpBasicList, modifyEmpBasicInfo} from "../../../api/user/user";

  export default {
    name: "empBasicInfoRegister",
    computed: {
      ...mapGetters([
        'points'
      ])
    },
    components: {
      Pagination
    },
    data() {
      return {
        multipleSelection: [],
        checkBoxIcon: false,
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          userName: '',
          teacherName: '',
          mechanismName: '',
          orderBy: '',
          type: ''
        },
        listLoading: true,
        keyWords: '',
        select: '1',
        empBasicData: [],
        empBasic: {},
        dialogLookVisible: false,
        dialogEditVisible: false,
        ruleForm: {
          userAddress: '',
          userPhone: '',
          workNum: '',
          workDepartment: '',
          bossName: '',
          bossPhone: '',
          userHostel: '',
          userComeFrom: '',
          comeFormTel: '',
          workMoney: '',
          id: ''
        },
        sendLoad: false
      }
    },
    created() {
      this.getEmpBasicList();
    },
    methods: {
      checkPermissionPoints(type) {
        let pointObj = this.points.empBasicInfoRegister;
        return permissionPoints(type, pointObj);
      },
      searchEmpBasic() {//搜索
        if (this.keyWords == '' || this.keyWords == undefined) {
          return this.$message.info({message: '请输入搜索内容', duration: 1000});
        }
        this.listQuery.userName = '';
        this.listQuery.teacherName = '';
        this.listQuery.mechanismName = '';
        if (this.select == 1) {
          this.listQuery.userName = this.keyWords;
        } else if (this.select == 2) {
          this.listQuery.teacherName = this.keyWords;
        } else if (this.select == 3) {
          this.listQuery.mechanismName = this.keyWords;
        }
        this.listQuery.page = 1;
        this.getEmpBasicList();
      },
      resetSearch() {
        this.select = '1';
        this.keyWords = '';
        this.listQuery.userName = '';
        this.listQuery.teacherName = '';
        this.listQuery.mechanismName = '';
        this.listQuery.type = '';
        this.$refs.multipleTable.clearFilter();
        this.listQuery.page = 1;
        this.getEmpBasicList();
      },
      getEmpBasicList() {
        this.listLoading = true;
        getInitEmpBasicList(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;
            this.empBasicData = items;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      filterChange(value) {//过滤
        this.listQuery.type = String(value.type);
        this.listQuery.page = 1;
        this.getEmpBasicList();
      },
      sortChange(column) {//排序
        if (column.prop == "time" && column.order == "ascending") {
          this.listQuery.orderBy = 'time asc';
        } else if (column.prop == "time" && column.order == "descending") {
          this.listQuery.orderBy = "time desc";
        }
        this.listQuery.page = 1;
        this.getEmpBasicList();
      },
      handleLook(row) {
        this.dialogLookVisible = true;
        getEmpBasicInfo(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.empBasic = retObj.data;
          }
        })
      },
      handleEdit(row) {
        this.dialogEditVisible = true;
        getEmpBasicInfo(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.ruleForm = retObj.data;
          }
        })
      },
      cancelEmpBasic() {
        this.dialogEditVisible = false;
        this.$refs.ruleForm.resetFields();
      },
      saveEmpBasic: function () {
        this.sendLoad = true;
        modifyEmpBasicInfo(this.ruleForm).then((res) => {//修改
          let retObj = res;
          this.sendLoad = false;
          if (retObj.code == 0 && retObj.data == 1) {
            this.ruleForm = {};
            this.dialogEditVisible = false;
            this.$message.success({message: '修改成功', duration: 2000});
            this.getEmpBasicList();
          } else {
            this.$message.error({message: '修改失败，请重试', duration: 2000});
          }
        }).catch(() => {
          this.sendLoad = false;
        })
      },
      handleDelete(row) {
        this.$confirm('此操作将删除该员工基本信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteEmpBasicInfo(row.id).then((res) => {
            let retObj = res;
            if (retObj.code == 0 && retObj.data > 0) {
              this.$message.success({message: '删除成功', duration: 2000});
              this.getEmpBasicList();
            } else {
              this.$message.error({message: '删除失败，请重试', duration: 2000});
            }
          })
        }).catch(() => {
        });
      }
    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      },
      formatTime2(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      },
      changeOriginType(type) {
        if (type == 1) {
          return '线上入职';
        } else if (type == 2) {
          return '线下入职';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .emp-container {
    .emp-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 20px;
        font-size: 18px;
        font-weight: bold;
        min-width: 200px;
        text-align: left;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword {
        margin-left: 36px;
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
    }
    .emp-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header th {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      > > > .el-table__fixed-right {
        height: 100% !important;
      }
    }
    .emp-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      position: fixed;
      width: 960px;
      z-index: 999;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }

    .emp-dialog > > > .el-dialog {
      overflow-y: auto;
      height: 65%;
    }
    .emp-dialog > > > .el-dialog .el-dialog__body {
      margin-top: 48px;
    }
    .look-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }
    .edit-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 15px;
    }
    .edit-dialog > > > .el-dialog__body {
      padding: 15px 20px;
    }
    .emp-dialog {
      font-size: 14px;
      color: #606266;
    }
    > > > .el-button {
      line-height: 1.2;
    }
  }
</style>
